﻿@using Aspire.Dashboard.Model
@using Aspire.Dashboard.Model.Otlp
@using Aspire.Dashboard.Resources
@implements IDialogContentComponent<FilterDialogViewModel>

@inject IStringLocalizer<Dialogs> Loc
@inject IStringLocalizer<StructuredFiltering> FilterLoc

<EditForm EditContext="@EditContext" OnValidSubmit="@Apply">
    <DataAnnotationsValidator />

    <FluentStack Orientation="Orientation.Vertical" VerticalGap="12">
        <div class="filter-input-container">
            <FluentSelect TOption="SelectViewModel<string>"
                          Placeholder="@Loc[nameof(Dialogs.FilterDialogFieldPlaceholder)]"
                          Label="@Loc[nameof(Dialogs.FilterDialogParameterInputLabel)]"
                          Items="@_parameters"
                          @bind-SelectedOption="@_formModel.Parameter"
                          @bind-SelectedOption:after="ParameterChangedAsync"
                          Width="100%"
                          Height="400px"
                          OptionText="@(c => c.Name)"
                          OptionDisabled="@(c => c.Id is null)" />
        </div>

        <div class="filter-input-container">
            <FluentSelect TOption="SelectViewModel<FilterCondition>"
                          Items="@_filterConditions"
                          @bind-SelectedOption="@_formModel.Condition"
                          Label="@Loc[nameof(Dialogs.FilterDialogConditionInputLabel)]"
                          OptionText="@(i => i.Name)"
                          Width="100%" />
        </div>

        <div class="filter-input-container">
            <FluentCombobox TOption="SelectViewModel<FieldValue>"
                            @bind-Value="_formModel.Value"
                            @bind-Value:after="ValueChanged"
                            Items="@_filteredValues"
                            Width="100%"
                            Height="400px"
                            OptionText="@(c => c.Name)"
                            OptionValue="@(c => c.Name)"
                            Immediate="true"
                            ImmediateDelay="@FluentUIExtensions.InputDelay"
                            Label="@Loc[nameof(Dialogs.FilterDialogTextValuePlaceholder)]">
                <OptionTemplate Context="optionContext">
                    <FluentBadge Circular=true Appearance="Appearance.Neutral" Slot="end">
                        @* There is FluentUI bug that causes bad data if there is additional text in an option. *@
                        @* https://github.com/microsoft/fluentui-blazor/issues/2695 *@
                        @* Workaround this issue by inserting extra text using CSS. *@
                        <span data-filtercount="@optionContext.Id!.Count"></span>
                    </FluentBadge>
                    <FluentHighlighter Text="@optionContext.Name" HighlightedText="@_formModel.Value" />
                </OptionTemplate>
            </FluentCombobox>
            <ValidationMessage For="() => _formModel.Value" />
        </div>

        <div class="filter-input-container filter-button-container">
            <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Left">
                @if (Content.Filter is not null)
                {
                    if (Content.Filter.Enabled)
                    {
                        <FluentButton Appearance="Appearance.Stealth" Title="@Loc[nameof(Dialogs.FilterDialogDisableFilterButtonText)]" aria-label="@Loc[nameof(Dialogs.FilterDialogDisableFilterButtonText)]" OnClick="Disable"><FluentIcon Value="@(new Icons.Regular.Size16.Pause())" /></FluentButton>
                    }
                    else
                    {
                        <FluentButton Appearance="Appearance.Stealth" Title="@Loc[nameof(Dialogs.FilterDialogDisableFilterButtonText)]" aria-label="@Loc[nameof(Dialogs.FilterDialogDisableFilterButtonText)]" OnClick="Enable"><FluentIcon Value="@(new Icons.Regular.Size16.Play())" /></FluentButton>
                    }
                    <FluentButton Appearance="Appearance.Stealth" Title="@Loc[nameof(Dialogs.FilterDialogRemoveFilterButtonText)]" aria-label="@Loc[nameof(Dialogs.FilterDialogRemoveFilterButtonText)]" OnClick="Delete"><FluentIcon Value="@(new Icons.Regular.Size16.Delete())" /></FluentButton>
                }
            </FluentStack>

            <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Right">
                <FluentButton OnClick="Cancel">@Loc[nameof(Dialogs.FilterDialogCancelButtonText)]</FluentButton>
                <FluentButton Color="Color.Primary" Type="ButtonType.Submit">@Loc[nameof(Dialogs.FilterDialogApplyFilterButtonText)]</FluentButton>
            </FluentStack>
        </div>
    </FluentStack>

</EditForm>
